<template>
  <div>
    <el-scrollbar class="side-bar-container" :class="{ 'is-collapse': collapse }">
      <logo />
      <!--
      <el-menu :background-color="variables['menu-background']" :text-color="variables['menu-color']" :active-text-color="variables['menu-color-active']" :default-active="activeMenu" :collapse="collapse" :collapse-transition="false" :default-openeds="defaultOpens" :unique-opened="uniqueOpened" mode="vertical">
        <template v-for="route in routes">
          <side-bar-item :key="route.path" :full-path="route.path" :item="route"></side-bar-item>
        </template>
      </el-menu>
      -->
      <div class="main-menu">
        <div v-for="(route, index) in routes" :key="index">
          <div v-if="!route.hidden" class="item" :class="{ 'is-active': route.active }" @click="showSubRoute(route)">
            <vab-icon v-if="route.meta && route.meta.icon" :icon="['fas', route.meta.icon]" class="vab-fas-icon" />
            <vab-remix-icon v-if="route.meta && route.meta.remixIcon" :icon-class="route.meta.remixIcon" class="vab-remix-icon" />
            {{ route.meta.title }}
          </div>
        </div>
      </div>
    </el-scrollbar>
    <div class="sub-bar-container" v-if="activeMenu != '/index'">
      <!-- <div class="sub-bar-container-title">
        首页
      </div> -->
      <!-- <el-menu-item-group v-for="(item, index) in activeRoute.children" :key="index">
        <template slot="title">分组一</template>
        <el-menu-item index="">选项1</el-menu-item>
      </el-menu-item-group>
      -->
      <div class="long-title" v-if="activeRoute">{{ activeRoute.meta.fullTitle || '' }}</div>
      <div v-for="(item, index) in activeRoute.children" :key="index" class="group-item">
        <div class="group-title">{{ item.meta.title }}</div>

        <div v-for="(sitem, sindex) in item.children" :key="sindex">
          <div v-if="!sitem.hidden" @click="navigateTo(sitem)" class="sitem" :class="{ 'is-active': sitem.active }">
            {{ sitem.meta.title }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { Logo } from '@/layouts/components'
import SideBarItem from './components/SideBarItem'
import variables from '@/styles/variables.scss'
import { mapGetters } from 'vuex'
import { defaultOopeneds, uniqueOpened } from '@/config/settings'

export default {
  name: 'SideBar',
  components: { SideBarItem, Logo },
  data() {
    return {
      uniqueOpened,
      // activeRoute: {},
    }
  },
  computed: {
    ...mapGetters({
      collapse: 'settings/collapse',
      routes: 'routes/routes',
      activeRoute: 'menu/activeRoute',
    }),
    defaultOpens() {
      if (this.collapse) {
      }
      return defaultOopeneds
    },
    activeMenu() {
      const route = this.$route
      const { meta, path } = route
      if (meta.activeMenu) {
        return meta.activeMenu
      }
      return path
    },
    variables() {
      return variables
    },
  },
  watch: {
    $route() {
      this.setRoutesStatus()
    },
  },
  created() {
    // console.log(this.routes)
    this.setRoutesStatus()
  },
  methods: {
    setRoutesStatus() {
      let activeRoute = {}
      this.routes.forEach(x => {
        this.$set(x, 'active', false)
      })
      this.routes.forEach(x => {
        if (x.children && x.children.length != 0) {
          // 如果是首页，则直接设置为激活页
          if (this.$route.path == '/index') {
            activeRoute = this.routes.filter(x => x.path == '/')[0]
            activeRoute.active = true
            return
          }
          // 不是首页的话，循环遍历，找到激活页
          x.children.forEach(y => {
            if (y.children && y.children.length != 0) {
              y.children.forEach(z => {
                if (z.path == this.activeMenu) {
                  x.active = true
                  z.active = true
                  activeRoute = x
                }
              })
            }
          })
        }
      })
      this.$store.commit('menu/setActiveRoute', activeRoute)
    },
    showSubRoute(route) {
      // 禁止跳转同名路由
      if (this.$route.path == route.redirect) return
      this.routes.forEach(x => {
        x.active = false
      })
      route.active = true
      let activeRoute = route
      // console.log(this.activeRoute)
      // console.log(route)
      // return
      this.$router.push(activeRoute.redirect)
      activeRoute.children.forEach(x => {
        if (x.children && x.children.length != 0) {
          x.children.forEach(y => {
            this.$set(y, 'active', false)
          })
        }
      })
      if (activeRoute.path != '/') {
        activeRoute.children[0].children[0].active = true
      }
      this.$store.commit('menu/setActiveRoute', activeRoute)
    },
    navigateTo(route) {
      // let activeRoute = {}
      if (this.$route.path == route.path) return
      this.activeRoute.children.forEach(x => {
        if (x.children && x.children.length != 0) {
          x.children.forEach(y => {
            this.$set(y, 'active', false)
          })
        }
      })
      route.active = true
      this.$router.push(route.path)
      // this.$store.commit('menu/navigateTo', { vue: this, route })
    },
  },
}
</script>
<style lang="scss" scoped>
@mixin active {
  // &:hover {
  //   color: $base-color-white;
  //   background-color: $base-menu-background-active !important;
  // }

  &.is-active {
    color: $base-color-white;
    background-color: $base-menu-background-active !important;
  }
}
.main-menu {
  color: #bfcbd9;
  .item {
    text-overflow: ellipsis;
    overflow: hidden;
    line-height: 36px !important;
    height: 36px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    display: flex;
    align-items: center;
    // justify-content: space-between;
    margin-bottom: 10px;
    .vab-fas-icon {
      width: 16px;
      margin-right: 8px;
    }
    cursor: pointer;
    transition: 0.2s;
    &:hover {
      background: rgb(31, 42, 54);
    }
    i {
      display: none;
    }
    &.is-active {
      color: $base-color-white;
      background-color: $base-menu-background-active !important;
    }
  }
}
.sub-bar-container {
  position: fixed;
  top: 0;
  bottom: 0;
  width: $base-left-menu-width;
  left: $base-left-menu-width;
  padding: 0 10px;
  background: #fff;
  z-index: 11;
  box-sizing: border-box;
  .long-title {
    height: $base-nav-bar-height;
    text-align: center;
    line-height: $base-nav-bar-height;
  }
  .group-item {
    padding: 10px 0;
    border-top: 1px solid #f1f1f1;
    // margin-bottom: 10px;

    .group-title {
      padding: 0 10px;
      color: #999;
      font-size: 12px;
      height: 30px;
      line-height: 30px;
      margin-bottom: 10px;
    }
    .sitem {
      display: flex;
      align-items: center;
      margin-bottom: 10px;
      padding: 0 10px;
      height: 30px;
      color: #323233;
      border-radius: 2px;
      cursor: pointer;
      &:hover {
        color: $base-menu-background-active;
      }
      &.is-active {
        background: #ebedf0 !important;
        &:hover {
          color: #323233;
        }
      }
    }
  }
}
.side-bar-container {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: $base-z-index;
  width: $base-left-menu-width;
  height: 100vh;
  overflow: hidden;
  background: $base-menu-background;
  box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
  transition: width $base-transition-time;

  &.is-collapse {
    width: $base-left-menu-width-min;
    border-right: 0;

    ::v-deep {
      .el-menu {
        transition: width $base-transition-time;
      }

      .el-menu--collapse {
        border-right: 0;

        .el-submenu__icon-arrow {
          right: 10px;
          margin-top: -3px;
        }
      }
    }
  }
  ::v-deep {
    .el-menu-item {
      text-overflow: ellipsis;
      overflow: hidden;
      line-height: 36px !important;
      height: 36px !important;
      padding-left: 20px !important;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      margin-bottom: 10px;
    }
  }
  ::v-deep {
    .el-scrollbar__wrap {
      overflow-x: hidden;
    }

    .el-menu {
      border: 0;

      .vab-fas-icon {
        padding-right: 3px;
        font-size: $base-font-size-default;
      }

      .vab-remix-icon {
        padding-right: 3px;
        font-size: $base-font-size-default + 2;
      }
    }

    .el-menu-item,
    .el-submenu__title {
      height: $base-menu-item-height;
      overflow: hidden;
      line-height: $base-menu-item-height;
      text-overflow: ellipsis;
      white-space: nowrap;
      vertical-align: middle;
    }

    .el-menu-item {
      @include active;
    }
  }
}
</style>
